<template>
  <div class="pay">
   <mt-header title="交易密码" fixed>
  <div slot="left">
    <mt-button icon="back" @click="back()"></mt-button>
  </div>
</mt-header>
<div class="pay_content">
    <div class="pay_text">短信验证码发送到<span style="color:#3AA1F7;">{{getPhone}}</span></div>
  <div class="reg_yzm">
    <input type="text" class="input"   placeholder="请输入验证码" v-model="code">
    <span class="getyzm themebtn" v-if="getflag" @click="getyzm()">获取</span>
    <span class="stopyzm" v-if="getflag==false">{{time}}s</span>
  </div>
</div>
<div class="payto">
    <input type="password" class="input" v-model="pwd" placeholder="请输入六位交易密码" maxlength="6" minlength="6">
</div>
<div>
    
</div>
<div class="paybtnbg">
    <button :class="{themebtn:code&&pwd}" @click="resetPassword(code&&pwd)">确认修改</button>
</div>
<!-- <Code :flag="flag" @close="close" @changePwd='changePwd' @ok="successOk" ref="code"></Code> -->
  </div>
</template>
<script>
import { Header, Toast } from "mint-ui";
import { retrievePay, sendCode } from "../api/api.js";
import util from '../assets/js/util.js';
import Code from "./main/code";
export default {
  name: "Pay",
  data() {
    return {
      msg: "",
      id: "",
      code: "",
      getflag: true,
      time: 60,
      pwd: "",
      phone:"",
      flag:false,
      // pwd:""
    };
  },
  computed:{
    getPhone(){
      return util.getPhone(this.$route.query.phone)
    }
  },
  methods: {
    onFocus(){
      this.flag = true;
    },
    close(){
      this.flag = false;
    },
    changePwd(pwd){
      this.pwd = pwd.join("");
    },
    successOk(){
      this.flag = false;
    },
    back() {
      this.$router.go(-1);
    },
    getyzm() {
      // this.getflag = false;
		let para = {
			mobilephone: this.phone
		};
		this.$ajaxPost("sendCode", para).then(res => {
			console.log(res);
			Toast({
				message: res.msg,
				position: "bottom",
				duration: 5000
			});
			if (res.code == 200) {
				this.getflag = false;
				var that = this;
				var timer = setInterval(function() {
				that.time--;
				if (that.time <= 0) {
					clearInterval(timer);
					that.getflag = true;
					that.time = 60;
				}
				}, 1000);
			}
		});
    },
    resetPassword(w) {
      if (w) {
			let pattern = /^\d{6}$/;
			if (pattern.test(this.pwd)) {
			let para = {
				mobilephone: this.phone,
				code: this.code,
				pwd: this.pwd,
				// id:JSON.parse(util.getLocalStorage('userinfo')).id
			};
			console.log(para)
			this.$ajaxPost("retrievePay", para).then(res => {
				Toast({
					message: res.msg,
					position: "bottom",
					duration: 5000
				});
				if (res.code == 200) {
					this.back();
				}
			});
        } else {
          Toast({
            message: "交易密码必须是六位数字！",
            position: "bottom",
            duration: 3000
          });
        }
      } else {
        Toast({
          message: "请先输入验证码和交易密码！",
          position: "bottom",
          duration: 3000
        });
      }
    }
  },
  components:{
    Code
  },
  mounted() {
    this.phone = this.$route.query.phone;
    // this.getyzm();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/pay.css");
</style>
